<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../day09/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="box1">1111</div>
      <div class="box2">2222</div>
      <div class="box3">3333</div>
    </div>
    <script>
      // 元素操作：增删改查
      // 新增相关
      // 1.创建一个jq元素； $(标签)
      // document.createElement

      //   document.createElement("<div></div>");
      //   $("div");

      //   let ele = $("<div></div>", {
      //     class: "box",
      //     style: "width:100px;height:100px;background:red",
      //   }).html("我是jq创建的标签");
      //   $(".container").append(ele);

      // 2.可以添加到执行的容器 父元素.append(元素);
      //   $(document).click(function () {
      //     $(".container").append($("<span></span>").html("我是span"));
      //   });

      // 2.可以把元素添加到父元素里  子元素.appendTo(父元素);
      //   $(document).click(function () {
      //     $("<span></span>").html("我是span").appendTo($(".container"));
      //   });
      // 3.添加再某个元素之后 元素.after("元素");
      // $(document).click(function(){
      //     // $(".box2").after($("<span></span>").html("我是span"));
      //     $("<span></span>").html("我是span").insertAfter($(".box2"));

      // })
      // 4.添加到某个元素之前 元素.before(“元素”);
      $(document).click(function () {
        // $(".box2").before();
        $("<span></span>").html("我是span").insertBefore($(".box2"));
      });
    </script>
  </body>
</html>
